为前端服务的Serverless研究

验“金”室

近年来，随着前端多客户端场景的丰富，前端页面差异化越来越大，导致后端服务变动频繁，在前端和后端之间增加的中间层BFF（Backends For Frontends）应运而生[1]。阿里BFF架构如图1所示。

图1 阿里BFF架构[2]

BFF为前端服务的后端，它被定义为用户体验适配层和API聚合层，主要负责快速跟进UI迭代，对后端接口服务进行组合、处理，对数据进行裁剪、格式化、聚合，对不同端提供差异化服务[1]。

BFF本质上是服务层，除了编程语言外，开发者还需要具备服务器、服务管理、数据管理等领域知识，运维工作及服务高可用性成为一种技术挑战，运维成本成为瓶颈。

国内大型云商阿里、腾讯相继采用Serverless理念改造BFF层并逐步演进为SFF（Serverless For Frontend）——为前端服务的Serverless，从而实现零配置完成项目的发布上线，极大降低了运维成本。目前，国内外的各大云厂商如AWS、阿里、腾讯等已相继推出本地开发的相关解决方案。

一、SFF的概念

Serverless作为云虚拟机技术、容器技术之后的下一代计算形态，被认为是云计算发展的未来方向，函数计算是Serverless架构的最主要实现方式，具有按需加载、事件驱动、自动弹性伸缩、免运维等特点。总体优势主要包括：

使用大资源池，根据不同应用的特点错峰动态使用资源池内容；

事件驱动，仅在事件触发时才调度容器运行任务；

简化开发，开发工程师在函数计算平台提供的底座之上编写函数业务代码，无需关心配置和部署；

简化运维，平台提供统一的函数运维和高可用能力。

SFF为前端服务的Serverless，是前端BFF的下一个发展方向，可以将传统的BFF服务转换为函数计算平台可运行的函数形式，由函数计算平台将函数发布为服务，并提供统一的函数运维和高可用能力。SFF不仅仅是BFF，还能利用云上各种服务独立承载前端业务的开发，推动前端往云端全栈发展，成为前端研发模式升级的利器。 阿里BFF in Serverless架构如图2所示。

图2 阿里BFF in Serverless架构[2]

二、SFF的优点

1.简化上线流程

传统BFF应用已对接下游RPC或HTTP服务，并对数据进行聚合、编排、裁剪等操作，然后返回给前端页面。迁移至SFF后，可以免去机器申请、环境配置等运维方面工作，直接简化上线流程。前端升级研发模式发版流程如图3所示。

图3 前端升级研发模式发版流程[3]

2.研发人效提升

传统BFF模式下开发业务功能需要前端工程师和后端工程师全程介入，存在前后端开发进度不同步、联调相互等待等问题，升级SFF研发模式后，业务功能仅需前端工程师介入，相比传统BFF模式下的前端人效从20人天缩短到9人天。前端升级研发模式的人效提升示意如图4所示。

图4 前端升级研发模式的人效提升[3]

三、SFF的典型应用场景

1.多端应用

后端服务被诸多客户端使用，并且每种客户端对于同一类的API都有定制化需求。前端产品变化相对于后端业务更加频繁，前端需要根据业务场景灵活对接各种已有的后端微服务或云服务，搭建SFF层就可以快速应对。访问前端页面的调用流程如图5所示。

图5 访问前端页面的调用流程

2.服务端渲染SSR（Server-Side Render）

SSR指在服务端直接将HTML输出给客户端，近年来逐步演变成在服务端上运行前端JS代码进行渲染的服务端客户端同构方案，如React、Vue等主流框架都有同构渲染方案。构建SSR应用最为复杂的就是服务器负载均衡策略、环境部署、应对用户峰值等问题，而SFF则恰好免去SSR服务器申请、运维、扩容等步骤，云资源无限扩容也规避了业务量对SSR服务器的性能影响。SSR服务调用流程如图6所示。

图6 SSR服务调用流程

3.研发模式升级

前端团队通过SFF可以聚合某些后端接口或独立实现一些后端服务，减少了与后端团队的沟通成本，也能解决前端工程师运维方面的技术瓶颈问题。前端开发流程如图7所示。

图7 前端开发流程

4.轻应用建场

从用户体验要求和研发成本出发的业务目标逐渐多样，原有的公域不再是搜索、首页、营销活动固定入口，而是逐渐以轻应用为主阵地抓住热点、吸引流量，围绕行业长尾业务快速建场成为行业核心诉求。轻应用包含大量的前端展示信息，较少涉及后端服务变动，如何在应用正常运行的情况下快速发布这些页面非常重要。轻应用访问流程如图8所示。

图8 轻应用访问流程

SFF“轻研发+免运维”的优势降低了前端工程师实施BFF的技术门槛和资源成本，实现以前端页面为流量入口的业务快速上线，同时，还能利用云上各种服务独立承载前端业务的开发，高效推动前端开发向云端全栈转型，帮助金融科技行业更好地在云及前端领域进行技术探索与实践。

参考文献如下：

[1] Sam Newman.Pattern: Backends For Frontends[EB/OL].(2015-11-18). 

https://samnewman.io/patterns/architectural/bff/

[2]杨凯.Backend For Frontend（BFF）in Serverless[EB/OL].(2019-07-13). 

https://myslide.cn/slides/21416

[3]陈仲寅.自研开源框架 Midway Serverless，让前端提效 50% 背后的故事[EB/OL]. (2020-07-13). 

https://blog.csdn.net/alitech2017/article/details/107322610.

FCC30+

长按左边二维码

关注我们不迷路